<template>
    
    <a-modal
        width="100%"
        wrapClassName="questionnaire--full-modal"
        :visible="visibleShow" 
        title="查看问卷" 
        @ok="visibleShow = false" 
        :forceRender="true"
        @cancel="visibleShow = false"
        :footer="null"
    >
        <a-spin size="large" :spinning="spinning" :key="spinningKey">
            <div style="margin-bottom: 20px;">
                <a-button class="blue-btn" type="primary" @click="visibleShow = false">返回</a-button>
                <a-button style="margin-left: 10px;" class="blue-btn" type="primary" @click="refreshClick()">刷新</a-button>
            </div>
            <div class="satisfactionQuestionnaire-content">
                <div >
                    <div style="text-align: center;">
                        <h2 style="font-weight: 600;">{{ details.fwjbt }}</h2>
                    </div>
                    <div style="font-weight: 600;color: #2F54EB;font-size: 16px;">
                        <span>{{ details.fwjms }}</span>
                    </div>
                    <div style="margin-top: 15px;">
                        <div class="theEntire-question" id="fgzdw">
                            <span class="subject-title">
                                
                                1.单位名称
                            </span>
                            <a-textarea
                                v-model="fstateData.fgzdw"
                                readOnly
                                placeholder="请输入单位名称"
                                :auto-size="{ minRows: 1, maxRows: 2 }"
                            />
                        </div>
                        <div class="theEntire-question" id="fqyfzr">
                            <span class="subject-title">
                                
                                2.联系人
                            </span>
                            <a-textarea
                                readOnly
                                v-model="fstateData.fqyfzr"
                                placeholder="请输入联系人"
                                :auto-size="{ minRows: 1, maxRows: 2 }"
                            />
                        </div>
                        <div class="theEntire-question" id="flxdh">
                            <span class="subject-title">
                                
                                3.联系电话
                            </span>
                            <a-textarea
                                v-model="fstateData.flxdh"
                                readOnly
                                placeholder="请输入联系电话"
                                :auto-size="{ minRows: 1, maxRows: 2 }"
                            />
                        </div>
                        <div class="theEntire-question">
                            <span class="subject-title" id="fxz">
                                
                                4.单位类型
                            </span>
                            <div>
                                <a-checkbox-group v-model="fstateData.fxz" disabled>
                                    <div v-for="(item,index) in plainOptions" :key="index">
                                        <a-checkbox :value="item.itemValue">{{ item.itemText }}</a-checkbox>
                                    </div>
                                </a-checkbox-group>
                            </div>
                            
                            <a-textarea
                                id="fqtxz"
                                readOnly
                                v-if="fstateData.fxz && fstateData.fxz.indexOf('其他') !== -1"
                                v-model="fstateData.fqtxz"
                                placeholder="请输入其他"
                                :auto-size="{ minRows: 1, maxRows: 2 }"
                            />
                        </div>
                        <div class="theEntire-question" id="fyjhyq">
                            <span class="subject-title">
                                
                                5.其他意见建议和要求
                            </span>
                            <a-textarea
                                v-model="fstateData.fyjhyq"
                                readOnly
                                placeholder="请输入其他意见建议和要求"
                                :auto-size="{ minRows: 3, maxRows: 1000 }"
                            />
                        </div>
                        <div class="question-type">对中心的评价</div>
                        <div class="theEntire-question" v-for="(item,index) in zxpjList" :key="index" :id="'fpjjg'+index">
                            <span class="subject-title">
                                
                                {{ item.fpjbt }}
                            </span>
                            <div class="answer-list">
                                <span class="foption-box" :class="item.fpjjg == trem?'foption-fpjjg':''" v-for="(trem,tIndex) in item.foption.split(',')" :key="tIndex">{{ trem }}</span>
                            </div>
                            <div style="display: flex;justify-content: space-between;color: #9f9f9f;">
                                <span>非常不满意</span>
                                <span>非常满意</span>
                            </div>
                        </div>
                        <!-- （审评时间：{{details.fjcsj}}） -->
                        <div class="question-type">对审评组的评价</div>
                        <div class="theEntire-question" v-for="(item,index) in jcyPjList" :key="index">
                            <div class="fjcy-content-box">
                                <span class="fjcysf-fjcyxm-box">{{ item.fjcysf }}：{{ item.fjcyxm }}</span>
                                <div class="jcy-pj-box" :id="'fzxqk'+index">
                                    <span class="subject-title">
                                        
                                        审评员廉洁自律和审评纪律方面的执行情况（1-10分）
                                    </span>
                                    <div class="answer-list">
                                        <span class="foption-box" :class="item.fzxqk == trem?'foption-fpjjg':''" v-for="(trem,tIndex) in item.foption.split(',')" :key="tIndex">{{ trem }}</span>
                                    </div>
                                    <div style="display: flex;justify-content: space-between;color: #9f9f9f;">
                                        <span>非常不满意</span>
                                        <span>非常满意</span>
                                    </div>
                                </div>
                                <div class="jcy-pj-box" :id="'fywnl'+index">
                                    <span class="subject-title">
                                        
                                        审评员的业务能力（1-10分）
                                    </span>
                                    <div class="answer-list">
                                        <span class="foption-box" :class="item.fywnl == trem?'foption-fpjjg':''" v-for="(trem,tIndex) in item.foption.split(',')" :key="tIndex">{{ trem }}</span>
                                    </div>
                                    <div style="display: flex;justify-content: space-between;color: #9f9f9f;">
                                        <span>非常不满意</span>
                                        <span>非常满意</span>
                                    </div>
                                </div>
                                <div class="jcy-pj-box" :id="'fzhpj'+index">
                                    <span class="subject-title">
                                        
                                        审评员在审评过程中实事求是、注重实绩、综合评价（1-10分）
                                    </span>
                                    <div class="answer-list">
                                        <span class="foption-box" :class="item.fzhpj == trem?'foption-fpjjg':''" v-for="(trem,tIndex) in item.foption.split(',')" :key="tIndex">{{ trem }}</span>
                                    </div>
                                    <div style="display: flex;justify-content: space-between;color: #9f9f9f;">
                                        <span>非常不满意</span>
                                        <span>非常满意</span>
                                    </div>
                                </div>
                                <div class="jcy-pj-box">
                                    <span class="subject-title">备注</span>
                                    <div class="answer-list">
                                        <a-textarea
                                            v-model="item.fbz"
                                            readOnly
                                            placeholder="请输入其他"
                                            :auto-size="{ minRows: 1, maxRows: 2 }"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="question-type">建议和要求</div>
                        <div class="theEntire-question">
                            <span class="subject-title">其他意见建议和要求</span>
                            <a-textarea
                                v-model="fstateData.fyjhyq"
                                readOnly
                                placeholder="请输入单位名称"
                                :auto-size="{ minRows: 1, maxRows: 1000 }"
                            />
                        </div> -->
                    </div>
                    <!-- <div style="display: flex;justify-content: center;">
                        <a-button class="blue-btn" type="primary" @click="submitClick">提交</a-button>
                    </div> -->
                </div>
            </div>
        </a-spin>
    </a-modal>
    
</template>
<script>
import {mydgetMydInfoById,ocalityPostAction} from './service/index'
export default {
    components:{

    },
    data(){
        return{
            spinning:true,
            spinningKey:null,
            viewFailed:false,
            visibleShow:false,
            currentData:{},
            details:{},
            jcyPjList:{},
            zxpjList:{},
            fstateData:{},
            plainOptions:[],
        }
    },
    mounted(){
        ocalityPostAction({dictName:'廉洁自律满意度性质'}).then(res=>{
            if(res.code == 200){
                this.plainOptions = res.result
            }else{

            }
        })
    },
    methods:{
        refreshClick(){
            this.getData(this.currentData)
        },
        getData(row){
            this.currentData = row
            this.spinning = true
            this.spinningKey = Date.now()
            mydgetMydInfoById({id:row.id}).then(res=>{
                if(res.code == 200){
                    this.viewFailed = true
                    this.details = {...res.result.myd,sqsxid:row.sqsxid}
                    res.result.myd.fxz = res.result.myd.fxz?res.result.myd.fxz.split(','):[]
                    this.fstateData = res.result.myd
                    this.jcyPjList = res.result.jcyPjList
                    this.zxpjList = res.result.zxpjList
                }else{
                    this.viewFailed = false
                }
                this.spinning = false
            })
        },

    }
}
</script>
<style lang="less" scoped>
.questionnaire-box{
    
    .questionnaire-data{
        height: calc(100vh - 211px);
        overflow-y: auto;
        padding: 15px;
        font-size: 18px;
        .answer-select{
            display: flex;
            align-items: center;
            margin: 5px;
            padding-right: 20px;
            .frame{
                top: 4px;
                margin-left: 5px;
                display: inline-block;
                width: 18px;
                height: 18px;
                text-align: center;
                border: 1px solid #000;
                line-height: 1;
                color: #1890ff;
            }
        }
    }
    .title{
        font-size: 20px;
        

    }
    .one-t{
        display: inline-block;
        margin:10px;
        font-weight: 600;
    }
    .topic{
        font-size: 18 !important;
        display: inline-block;
        margin:10px;
    }
    
}

.blue-btn{
    border: 1px solid #5ca3e5 !important;
    background-color: #5ca3e5 !important;
    color: #fff !important;
}
</style>
<style lang="less">
.questionnaire--full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }
  .ant-modal-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: calc(100vh);
  }
  .ant-modal-body {
    flex: 1;
    background: #fff !important;
    height: calc(100vh - 108px);
    overflow-y: auto;
    padding: 8px;
  }
  .ant-modal-footer{
    background: #fff !important;
  }
}
.satisfactionQuestionnaire-content{
    padding: 10px;
    background-color: #fff;
    width:794px;
    textarea.ant-input{
        background-color: #f9fafc;
        border-color:transparent;
        box-shadow:none;
    }
    .ant-input:focus{
        border-color:transparent;
        box-shadow:none;
    }
    .ant-input:hover{
        border-color:transparent;
        box-shadow:none;
    }
    .ant-checkbox + span{
        display: inline-block;
        padding: 0;
        padding-left: 3px;
        font-size: 16px;
        font-weight: 600;
    }
    .ant-checkbox-wrapper + .ant-checkbox-wrapper{
        margin-left: 3px;
    }
    .question-type{
        font-size: 18px;
        font-weight: 600;
        color: #2F54EB;
        margin: 8px 0;
    }
    .theEntire-question{
        margin-bottom: 8px;
        margin-left: 5px;
        .fjcy-content-box{
            padding: 5px;
            margin-bottom: 15px;
            border-bottom: 3px solid #2F54EB ;
            border-left: 1px solid #2F54EB;
            border-right: 1px solid #2F54EB;
            border-top: 3px solid #2F54EB ;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }
        .fjcysf-fjcyxm-box{
            font-size: 19px;
            font-weight: 600;
        }
        .subject-title{
            font-size: 16px;
            font-weight: 600;
        }
        .asterisk-text{
            color: red;
        }
        .jcy-pj-box{
            margin-bottom: 15px;
            
        }
        .answer-list{
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
        }
        .foption-box{
            display: inline-block;
            border: 1px solid #d9d9d9;
            padding: 0 8px;
            font-weight: 600;
        }
        .foption-fpjjg{
            background-color: #2F54EB;
            color: #fff;
        }
    }
    .verification-prompt-text{
        font-size: 16px;
        font-weight: 600;
        color: red;
    }
    .ant-checkbox-disabled + span{
        color: rgba(0, 0, 0, 0.65);
    }
    .ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner:after{
        border-color: #fff;
    }
    .ant-checkbox-checked .ant-checkbox-inner{
        background-color: #2F54EB !important;
    }
}
</style>